<template>
  <div class="login" :style="'background-image:url('+ Background +');'">
    <div class="login-box">
			<div class="login-left">
				<vue-flux
				  :options="options"
				  :images="images"
				  :transitions="transitions"
				>
					<template v-slot:preloader>
						<flux-preloader />
					</template>
				</vue-flux>
			</div>
			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
				<h3 class="title">
					ZLXZF 后台管理系统
				</h3>
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" type="text" clearable auto-complete="off" placeholder="账号">
						<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" clearable auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
						<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
					</el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input v-model="loginForm.code" auto-complete="off" clearable placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
						<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
					</el-input>
					<div class="login-code">
						<img :src="codeUrl" @click="getCode">
					</div>
				</el-form-item>
				<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
					记住我
				</el-checkbox>
				<div style="width:100%;display: flex;justify-content: space-around;margin-bottom: 8%;">
					<el-button size="medium" round icon="el-icon-circle-close" style="width:48%;" @click="reset">
						<span>重 置</span>
					</el-button>
					<el-button :loading="loading" size="medium" round icon="el-icon-s-custom" type="primary" style="width:48%;" @click.native.prevent="handleLogin">
						<span v-if="!loading">登 录</span>
						<span v-else>登 录 中...</span>
					</el-button>
				</div>
			</el-form>
			<el-button class="followPartBtn" icon="el-icon-edit-outline" v-if="followShow" type="primary" round @click="followShow = !followShow">关注公众号</el-button>
			<div class="followPart" v-else>
				<i class="el-icon-close"
					style="margin-left: 90%;color: #ffffff;cursor: pointer;"
					@click="followShow = !followShow"
				></i>
				<img src="@/assets/images/official.jpg" style="width: 100px;" />
				<div style="font-size: 12px;color: #4b4b4b;">扫码关注公众号</div>
			</div>
		</div>
    <!--  底部  -->
		<div v-if="$store.state.settings.showFooter" id="el-login-footer" style="color: #00557f;">
		  <span v-html="$store.state.settings.footerTxt" />
		  <span> ⋅ </span>
		  <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" style="color: #626262;">{{
		    $store.state.settings.caseNumber
		  }}</a>
		  <a target="_blank"
		    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496751"
		    style="display: inline-block;text-decoration: none;height: 15px;line-height: 20px;color: #626262;"
		  >
				<img src="@/assets/images/guohui.png" style="float: left" />
		    <p style="float: left;height: 30px;line-height: 23px;margin: 0px 0px 0px 5px;color: #626262;">
		      {{ $store.state.settings.waCaseNumber }}
		    </p>
			</a>
		</div>
  </div>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import qs from 'qs'
import Background from '@/assets/images/login_bg.svg'
import {
	VueFlux,
	FluxPreloader
} from 'vue-flux';
export default {
  name: 'Login',
	components: {
		VueFlux,
		FluxPreloader
	},
  data() {
    return {
      Background: Background,
      codeUrl: '',
      cookiePass: '',
      loginForm: {
        username: 'admin',
        password: '123456',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      loading: false,
      redirect: undefined,
			followShow: false,
			options: {
				allowFullscreen: false,
				allowToSkipTransition: true,
				autohideTime: 3500,
				autoplay: true,
				bindKeys: false,
				delay: 3000,
				enableGestures: false,
				infinite: true,
				lazyLoad: false,
				lazyLoadAfter: 3,
		 },
		 images: [ 
			'/src/login_left3.png',
			'/src/login_left2.png',
			'/src/login_left1.png',
			'/src/login_left.png',
		],
		 transitions: [
			'cube',
			'fade',
			'fall',
			'swipe',
		 ]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const data = route.query
        if (data && data.redirect) {
          this.redirect = data.redirect
          delete data.redirect
          if (JSON.stringify(data) !== '{}') {
            this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
          }
        }
      },
      immediate: true
    }
  },
  created() {
    // 获取验证码
    this.getCode()
    // 获取用户名密码等Cookie
    this.getCookie()
    // token 过期提示
    this.point()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          this.$store.dispatch('Login', user).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录！',
          type: 'warning',
          duration: 2000
        })
        Cookies.remove('point')
      }
    },
		reset() {
			this.loginForm.username = '';
			this.loginForm.password = '';
			this.loginForm.code = '';
		}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
		position: relative;
		min-width: 550px;
		height: 100%;
		min-height: 500px;
		background-position: 50%;
		background-size: 100% 100%;
		background-size: cover;
		background-color: #eeeeee;
  }
	.login-box {
		position: absolute;
		top: 3%;
		right: 2%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 96%;
		height: 94%;
		padding: 0 4% 0 50px;
		background-color: hsl(0deg 0% 100% / 80%);
		border-radius: 10px;
		.login-left {
			width: 750px;
			opacity: 0.85;
		}
	}
  .title {
    margin: 0 auto 30px auto;
    text-align: center;
  }

  .login-form {
    border-radius: 10px;
    background: #ffffff;
    width: 385px;
		min-width: 330px;
    padding: 25px 25px 5px 25px;
		box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon{
      height: 39px;width: 14px;margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
    float: right;
    img{
      cursor: pointer;
      vertical-align:middle
    }
  }
	.followPart{
		position:absolute;
		/*定位方式绝对定位absolute*/
		top:12%;
		right: -3%;
		/*顶和高同时设置50%实现的是同时水平垂直居中效果*/
		transform:translate(-50%,-50%);
		/*实现块元素百分比下居中*/
		width:180px;
		padding:10px;
		text-align: center;
		background: rgba(0, 0, 0, 0.3);
		/*背景颜色为黑色，透明度为0.8*/
		box-sizing:border-box;
		/*box-sizing设置盒子模型的解析模式为怪异盒模型，
		将border和padding划归到width范围内*/
		box-shadow: 0px 2px 10px rgba(0,0,0,.5);
		/*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
		border-radius:8px;
		/*边框圆角，四个角均为15px*/
	}
	.followPartBtn {
		position:absolute;
		top:4%;
		right: 4%;
	}
</style>
